<extend name="Common:common"/>
<block name="main">

    <div class="main-content">
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="#"> 云系统管理平台</a>
                </li>

                <li>
                    <a href="#">系统基本信息</a>
                </li>
                <li class="active">系统设置</li>
            </ul>
            <!-- .breadcrumb -->

            <div class="nav-search" id="nav-search">
                <form class="form-search">
                <span class="input-icon">
                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                           autocomplete="off"/>
                    <i class="icon-search nav-search-icon"></i>
                </span>
                </form>
            </div>
            <!-- #nav-search -->
        </div>

        <div class="page-container">
            <table class="table table-border table-bordered table-bg">
                <thead>
                <tr>
                    <th colspan="7" scope="col">分类信息统计
                        <a href="{:U('Home/Category/addCategory')}" class="btn btn-primary">添加分类</a>
                        <button class="btn" id="bootbox-regular">添加分类</button>
                    </th>
                </tr>
                <tr class="text-c">
                    <th>ID</th>
                    <th>分类名称</th>
                    <th>级别</th>
                    <th>状态</th>
                    <th>排序</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <volist name="categorys" id="vo">
                    <tr class="text-c">
                        <td>{$vo.id}</td>
                        <td style="text-align: left">
                            <if condition="$vo.level eq 1">
                                <p style="text-indent:  {$vo['level']*20}px;">{$vo.name}</p>
                                <elseif condition="$vo.level eq 2"/>
                                <p style="text-indent:  {$vo['level']*20}px;">{$vo.name}</p>
                                <elseif condition="$vo.level eq 3"/>
                                <p style="text-indent:  {$vo['level']*20}px;">{$vo.name}</p>
                                <else/>
                                <p style="text-indent:  {$vo['level']*20}px;">{$vo.name}</p>
                            </if>
                        </td>
                        <td>{$vo.level}</td>
                        <td>
                            <if condition="$vo.level eq 1">
                                <span class="label label-success radius">1</span>
                                <elseif condition="$vo.level eq 2"/>
                                <span class="label label-primary radius">2</span>
                                <elseif condition="$vo.level eq 3"/>
                                <span class="label label-secondary radius">3</span>
                                <else/>
                                <span class="label label-danger radius">4</span>
                            </if>
                        </td>
                        <td>{$vo.order}</td>
                        <td>
                            <a href="javascript:editCategory({$vo.id})" class="btn btn-xs btn-info">编辑分类</a>
                            <a href="javascript:categoryDel({$vo.id})" class="btn btn-xs btn-danger del">删除</a>
                        </td>
                    </tr>
                </volist>
                </tbody>
            </table>
        </div>

        <!-- /.page-content -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加一个新分类
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" action="javascript:createCategory();">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 分类名称:</label>

                            <div class="col-sm-9">
                                <input type="text" id="name" placeholder="Username" class="col-xs-10 col-sm-5" name="name"/>
                            </div>
                        </div>

                        <div class="space-4"></div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-2">
                                父级分类： </label>
                            <div class="col-sm-9">
                                <select class="form-control" id="categoryId">
                                    <option value="0">根分类</option>
                                    <volist name="categorys" id="vo">
                                        <option value="{$vo['id']}">{$vo['name']}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">登录</button>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- /.main-content -->

    <script type="text/javascript">
        var $URL = "__APP__/Home/Category/";
        jQuery(function ($) {
            $("#bootbox-regular").click(function () {
                $("#categoryModal").modal('show');
            });

        });
        function createCategory(){
            $name = $('#name').val();
            $categoryId = $('#categoryId').val();
            var url = $URL+'ajaxAdd';
            var data = {
                'pid':$categoryId,
                'name':$name,
            };
            var success = function(response)
            {
                alert(response.errmsg);
                window.location.reload();
                console.table(response);
            };
            $.post(url,data,success,'json');
        }
        /**
         * 删除一个分类
         */
        function categoryDel($id){
            // check children category is not exist
            $actions = confirm('你确定要删除该分类吗？');
            if($actions){
                var success = function(response){
                    if(response.errcode == 200){
                        alert(response.errmsg);
                        window.location.reload();
                    }else if(response.errcode == 401){
                        $actions = confirm('你确定要连同子类一并删除吗？');
                    }else if(response.errcode == 402){
                        $actions = confirm('你确定要删除该分类下面的所有商品吗？');
                    }else{
                        alert(response.errmsg);
                    }

                    console.table(response);
                };
                $.post($URL+'checkCategory', {'id':$id},success,'json');
            }
        }
    </script>
</block>

